<template>
  <div>
    <role-header v-model:role="role" @handleSearch="handleSearch"></role-header>
    <!-- @handle-download="handleDownload" -->
    <role-main
      :tableData="tableData"
      @handleSearch="handleSearch"
      :loading="loading"
    ></role-main>
    <role-footer
      :total="pageData.total"
      v-model:current-page="pageData.currentPage"
      v-model:page-size="pageData.pageSize"
      @change="handlePageChange"
    >
    </role-footer>
  </div>
</template>
<script lang="ts" setup>
import RoleHeader from "./components/RoleHeader.vue";
import RoleMain from "./components/RoleMain.vue";
import RoleFooter from "./components/RoleFooter.vue";
import type { PageData } from "@/components/pagination/types";

import { getRoleList } from "@/api/manage/manage";

import type {
  RoleListItem,
  GetRoleListParams,
} from "@/api/manage/model/manage";

const loading = ref(false);
const role = ref("");
const tableData = ref<RoleListItem[]>([]);

const pageData: PageData = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1,
});

function handleSearch() {
  pageData.currentPage = 1;
  getTableData();
}
handleSearch();

function getTableData() {
  loading.value = true;
  const params: GetRoleListParams = {
    offset: pageData.currentPage,
    limit: pageData.pageSize,
    params: { roleName: role.value },
  };
  getRoleList(params)
    .then((res) => {
      tableData.value = res.items;
      pageData.total = res.totalNum;
    })
    .finally(() => (loading.value = false));
}
function handlePageChange() {
  getTableData();
}
// function handleDownload() {
//   // api调用
//   console.log("role", role.value);
// }
</script>
